<%@ page import="com.atguigu.service.impl.ServiceServiceImpl" %>
<%@ page import="com.atguigu.service.ServiceService" %>
<%@ page import="com.atguigu.service.ServerService" %>
<%@ page import="com.atguigu.service.impl.ServerServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>

<title>taskAssign页面</title>

<%--<div class="container-fluid "> <!--table行-->--%>

    <div class="container-fluid">
        <div align="center" class="col-lg-12">
            <div class="col-lg-4 col-lg-offset-4 form-inline">
                <div class="form-group" >
                    <label for="taskName" class="h3">任务编排页面:Name:</label>
                    <input type="text" class="form-control h3" id="taskName" placeholder="任务名称" >
                </div>
            </div>
        </div><!--head-->
        <hr>
        <div>
            <div class="col-lg-2 taskListArea">
                <table class="table table-striped table-bordered table-hover taskListTable" style="table-layout:inherit">
                    <thead class="thead">
                    <tr>
                        <th>序号</th>
                        <th>任务名称</th>
                    </tr>
                    </thead>
                    <tbody class="tbody">
                    <% Integer count=1;%>
                    <c:forEach items="${requestScope.deployGoals}" var="item" varStatus="taskStatus">
                        <tr class="tr">
                            <td class="number">
                                <input type="checkbox" class="hidden">
                                <%=count++%>
                                <div class="glyphicon glyphicon-remove  taskDelete hand"></div>
                            </td>
                            <td class="showTask hand" deployGoalId="${item.id}">${item.name}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table><!--taskListArea-->
            </div><!--taskListArea-->
            <div class="col-lg-10 taskMain">
                <div class="taskAssignArea">
                    <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 taskAssign" style="table-layout:inherit"><!--module区-->
                        <thead class="thead">
                        <tr>
                            <th class="col-md-1 ">编号</th>
                            <th class="col-md-1 ">deployEnv</th>
                            <th class="col-md-1 ">project</th>
                            <th class="col-md-1 ">module</th>
                            <th class="col-md-1 ">targetNode</th>
                            <th class="col-md-1 ">fileUrl</th>
                            <th class="col-md-1 ">操作</th>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <% Integer countModule=1;%>
                        <tr class="tr">
                            <td class="number">
                                <input type="checkbox">
                                <span class="count">
                                    <%=countModule++%>
                                </span>
                            </td>
                            <td class="">
                                <select class="deployEnv form-control col-sm-2">
                                    <c:forEach items="${requestScope.deployEnvs}" var="item">
                                        <option value="${item.id}">${item.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td class="">
                                <select class="project form-control col-sm-1">
                                    <c:forEach items="${requestScope.projects}" var="item">
                                        <option value="${item.id}">${item.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td class="">
                                <select class="projectModule form-control col-sm-1">
                                    <c:forEach items="${requestScope.projectModules}" var="item">
                                        <option value="${item.id}">${item.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td class="">
                                <select class="targetNode form-control col-sm-2">
                                    <c:forEach items="${requestScope.targetNodes}" var="item">
                                        <option value="${item.id}">${item.use}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td class="">
                                <input type="text" class="form-control fileUrl" placeholder="fileUrl">
                            </td>
                            <td class="">
                                <div class="btn-group">
                                    <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                                    <div class="btn btn-default glyphicon glyphicon-play startOrStop hand"></div>
                                    <div class="btn btn-default glyphicon glyphicon-trash delete hand"></div>
                                    <div class="btn btn-default glyphicon glyphicon-eye-open result hand"></div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table><!--任务编排区-->
                </div><!--taskAssignArea-->
                <div class="resultShowArea row">
                    <div class="form-group">
                        <textarea class="form-control showThisTargetNodeThisTaskResult" name="result"  cols="30" rows="10" placeholder="该节点,该任务的执行结果"></textarea>
                    </div>
                </div><!--resultShowArea-->
            </div><!--taskMain-->
        </div><!--body-->
</div>
</body>

<script>
    (function (original) {
        jQuery.fn.clone = function () {
            var result           = original.apply(this, arguments),
                my_textareas     = this.find('textarea').add(this.filter('textarea')),
                result_textareas = result.find('textarea').add(result.filter('textarea')),
                my_selects       = this.find('select').add(this.filter('select')),
                result_selects   = result.find('select').add(result.filter('select'));

            for (var i = 0, l = my_textareas.length; i < l; ++i) $(result_textareas[i]).val($(my_textareas[i]).val());
            for (var i = 0, l = my_selects.length;   i < l; ++i) {
                for (var j = 0, m = my_selects[i].options.length; j < m; ++j) {
                    if (my_selects[i].options[j].selected === true) {
                        result_selects[i].options[j].selected = true;
                    }
                }
            }
            return result;
        };
    }) (jQuery.fn.clone);
    $(".taskListArea").click(function (event){
        let eventTarget=$(event.target)
        let deployGoalObj=$("#taskName")

        if(eventTarget.hasClass("taskDelete")){
            let trObj=$(event.target).closest(".tr")
            let data={}
            data.taskId=trObj.find(".showTask").attr("taskId")
            data.taskType=trObj.find(".showTask").attr("taskType")
            //console.log(data)
            //return
            $.ajax({
                type: "post",
                url: "<%=basepath%>taskServlet?action=deleteTask",
                data: data,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    //console.log(response)
                    if(response=="删除成功"){
                        alert(response)
                        location.reload()
                    }else {
                        alert(response)
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(eventTarget.hasClass("showTask")){
            let deployGoalId=eventTarget.attr("deployGoalId")
            deployGoalObj.attr("deployGoalId",deployGoalId)
            deployGoalObj.val(eventTarget.html())
            let data={"deployGoalId":deployGoalId}
            let taskAssignAreaObj=$(".taskAssignArea")
            let lastTr=taskAssignAreaObj.find("tr:last")
            let tbodyObj=taskAssignAreaObj.find("tbody")
            $.ajax({ //获取targetNodes
                type: "post",
                url: "<%=basepath%>taskServlet?action=taskAssignGetDeployServiceModulesByDeployGoalId",
                data: data,
                success: function (response, status, xhr) {//渲染 targetNodes
                    //console.log("收到回信")
                    //console.log(response);return
                    let jsonObj=JSON.parse(response);
                    tbodyObj.html("")
                    $.each(jsonObj,function (index,item){
                        let newTrObj=$("<tr>").html(lastTr.html())
                        newTrObj.attr("deployServiceModuleId",item.id)
                        newTrObj.find(".count").html(index+1)
                        newTrObj.find(".env").val(item.deployEnvId)
                        newTrObj.find(".project").val(item.projectId)
                        let newProjectModuleObj=newTrObj.find(".projectModule")
                        $.ajax({ //去后端拿这个projectId所有的projectModule
                            type: "post",
                            url: "<%=basepath%>projectServlet?action=getProjectModulesByProjectId",
                            data: {"projectId":item.projectId},
                            success: function (response, status, xhr) {//渲染 targetNodes
                                //console.log("收到回信")
                                //console.log(response);return
                                let jsonObj=JSON.parse(response);
                                newProjectModuleObj.html("")
                                $.each(jsonObj,function (index,projectModule){
                                    let newOption=$("<option>")
                                    newOption.val(projectModule.id)
                                    if(item.projectModuleId==projectModule.id){
                                        newOption.attr("selected","selected")
                                    }
                                    newOption.html(projectModule.name)
                                    newProjectModuleObj.append(newOption)
                                })
                            },
                            timeout: 10000, //如果超时1000毫秒，就结束
                            error: function (xhr, errorText, errorType) { //错误后的行为
                                console.log("回信异常")
                                console.log("errorText:" + errorText); //error
                                console.log("errorType:" + errorType); //not found
                                console.log("xhr.status:" + xhr.status); //404
                                console.log("xhr.statusText:" + xhr.statusText); //not found
                            },
                            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                        })//去后端拿这个projectId所有的projectModule
                        let newTargeNodeObj=newTrObj.find(".targetNode")
                        $.ajax({ //去后端拿这个projectModuleId所有的targetNode
                            type: "post",
                            url: "<%=basepath%>projectServlet?action=getTargetNodesByDeployEnvIdAndProjectModuleId",
                            data: {"deployEnvId":item.deployEnvId,"projectModuleId":item.projectModuleId},
                            success: function (response, status, xhr) {//渲染 targetNodes
                                //console.log("收到回信")
                                //console.log(response);return
                                let jsonObj=JSON.parse(response);
                                newTargeNodeObj.html("")
                                $.each(jsonObj,function (index,targetNode){
                                    let newOption=$("<option>")
                                    newOption.val(targetNode.id)
                                    if(item.targetNodeId==targetNode.id){
                                        newOption.attr("selected","selected")
                                    }
                                    newOption.html(targetNode.use)
                                    newTargeNodeObj.append(newOption)
                                })
                            },
                            timeout: 10000, //如果超时1000毫秒，就结束
                            error: function (xhr, errorText, errorType) { //错误后的行为
                                console.log("回信异常")
                                console.log("errorText:" + errorText); //error
                                console.log("errorType:" + errorType); //not found
                                console.log("xhr.status:" + xhr.status); //404
                                console.log("xhr.statusText:" + xhr.statusText); //not found
                            },
                            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                        })//去后端拿这个projectModuleId所有的targetNode
                        newTrObj.find(".fileUrl").val(item.fileUrl)
                        tbodyObj.append(newTrObj)
                    })
                    lastTr.find(".count").html(Object.keys(jsonObj).length+1)
                    tbodyObj.append(lastTr)
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax //获取targetNodes按钮,以及结果区域的按钮,以及结果区域的结果内容
        }
    })
    $(".taskAssignArea").click(function (event){
        let eventTarget=$(event.target)
        let trObj=eventTarget.closest("tr")
        let deployGoalObj=$("#taskName")
        let tableObj=eventTarget.closest("table")
        if (eventTarget.hasClass("update")){//这是提交事件的收集器
            let data={};
            data.deployGoalName=deployGoalObj.val()
            data.deployGoalId=deployGoalObj.attr("deployGoalId")
            data.deployEnvId=trObj.find(".deployEnv").val()
            data.projectId=trObj.find(".project").val()
            data.projectModuleId=trObj.find(".projectModule").val()
            data.targetNodeId=trObj.find(".targetNode").val()
            data.fileUrl=trObj.find(".fileUrl").val()
            data.deployServiceModuleId=trObj.attr("deployServiceModuleId")
            data.lastId=trObj.prev().attr("deployServiceModuleId")
            //console.log(data)
            $.ajax({                                                            //提交主任务
                type: "post",
                url: "<%=basepath%>taskServlet?action=taskAssignAddTask",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    //console.log(response)
                    let JSONObj=JSON.parse(response)
                    alert(JSONObj.status)
                    if(JSONObj.status=="添加成功") {
                        let newTrObj=$("<tr>")
                        newTrObj=trObj.clone(true)
                        newTrObj.find(".count").html(parseInt(trObj.find(".count").html())+1)
                        newTrObj.find(".fileUrl").val("")
                        newTrObj.removeAttr("deployServiceModuleId")
                        tableObj.append(newTrObj)
                        trObj.attr("deployServiceModuleId",JSONObj.deployServiceModuleId)
                        deployGoalObj.attr("deployGoalId",JSONObj.deployGoalId)
                    }
                    if(JSONObj.status=="修改成功"){
                        //console.log(response)
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })
        }//这是提交事件的收集器
        if (eventTarget.hasClass("delete")){
            let data={}
            data.deployServiceModuleId=trObj.attr("deployServiceModuleId")
            $.ajax({                                                            //提交主任务
                type: "post",
                url: "<%=basepath%>taskServlet?action=taskAssignDeleteDeployServiceModuleById",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    //console.log(response);return;
                    trObj.remove()
                    tableObj.find(".count").each(function (index,item){
                        $(item).html(index+1)
                    })
                    alert(response)

                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })
        }
        if (eventTarget.hasClass("startOrStop")){
            if (eventTarget.hasClass("glyphicon-play")){
                eventTarget.removeClass("glyphicon-play").addClass("glyphicon-stop")
            }else {
                eventTarget.removeClass("glyphicon-stop").addClass("glyphicon-play")
            }
            let data={}
            data.deployServiceModuleId=trObj.attr("deployServiceModuleId")
            $.ajax({                                                            //提交主任务
                type: "post",
                url: "<%=basepath%>taskServlet?action=taskAssignStartOrStopDeployServiceModuleById",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    alert(response)
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })
        }
        if (eventTarget.hasClass("result")){
            let deployServiceModuleId=trObj.attr("deployServiceModuleId")
            let data={"deployServiceModuleId":deployServiceModuleId}
            $.ajax({                                                            //提交主任务
                type: "post",
                url: "<%=basepath%>taskServlet?action=taskAssignGetDeployServiceModuleResult",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    //console.log(response);return
                    let showThisTargetNodeThisTaskResultObj=$(".showThisTargetNodeThisTaskResult").val("")
                    let JsonObj=JSON.parse(response);
                    let contant=""
                    $.each(JsonObj,function (index,item){
                        console.log(item)
                        contant=contant+"command:"+item.command+"\r"+"status:"+item.status+"\r"+"result:"+item.result+"\r"+"\r"
                    })
                    showThisTargetNodeThisTaskResultObj.val(contant)
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })
        }
    })
    $(".resultShowArea").click(function (event) {//利用冒泡
        let eventTarget = $(event.target);
        if (eventTarget.hasClass('targetNode')) {//此时,已经明确了触发事件的元素是"targetNode"元素,下一步获取这个目标的这个任务详情
            $(".resultShowArea").find(".targetNode").removeClass("checked btn-primary")
            eventTarget.addClass("checked btn-primary")
            let data = {}
            data.targetNodeId = eventTarget.attr("targetNodeId")
            data.mainTaskId = eventTarget.attr("mainTaskId")
            $(".showThisTargetNodeThisTaskResult").val("")
            $.ajax({
                type: "post",
                url: "<%=basepath%>taskServlet?action=getSpeciallyAppointedTargetNodeMainTaskResult",
                data: data,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    //console.log(response)
                    let jsonObj = JSON.parse(response)
                    let showThisTargetNodeThisTaskResult = ""
                    $.each(jsonObj, function (index, item) {
                        //console.log(index)
                        //console.log(item)
                        showThisTargetNodeThisTaskResult = showThisTargetNodeThisTaskResult + "\n" + "id:" + index + "\n" + "command:" + item.command + "\n" + "status:" + item.status + "\n" + "result:" + item.result + "\n"
                    })
                    $(".showThisTargetNodeThisTaskResult").val(showThisTargetNodeThisTaskResult)
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
    })


    $(".taskAssignArea").change(function (event){
        let eventTarget=$(event.target)
        let trObj=eventTarget.closest("tr")
        if(eventTarget.hasClass("deployEnv")){
            let  data={}
            data.deployEnvId=eventTarget.val()
            data.projectId=trObj.find(".project").val()
            data.projectModuleId=trObj.find(".projectModule").val()
            $.ajax({//获取模块s
                type: "post",
                url: "<%=basepath%>projectServlet?action=getTargetNodesByDeployEnvIdAndProjectModuleId",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    //console.log(response);return
                    //console.log(JSON.parse(response));
                    let targetNode=trObj.find(".targetNode").html("")
                    $.each(JSON.parse(response),function (index,element){
                        //console.log(index)
                        //console.log(element.id)
                        let optionObj=$("<option/>")
                        optionObj.val(element.id)
                        optionObj.text(element.use)
                        targetNode.append(optionObj)
                    })
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            }) // 工程改变,要查模块
        }
        if(eventTarget.hasClass("project")){
            let data={};
            data.projectId=eventTarget.val();
            $.ajax({//获取模块s
                type: "post",
                url: "<%=basepath%>projectServlet?action=getProjectModulesByProjectId",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    //console.log(response)
                    //console.log(JSON.parse(response));
                    let projectModuleObj=trObj.find(".projectModule").html("")
                    $.each(JSON.parse(response),function (index,element){
                        //console.log(index)
                        //console.log(element.id)
                        let optionObj=$("<option/>")
                        optionObj.val(element.id)
                        optionObj.text(element.name)
                        projectModuleObj.append(optionObj)
                    })
                    let data={"projectModuleId":projectModuleObj.val()}
                    $.ajax({//根据模块的第一个,获取target节点
                        type: "post",
                        url: "<%=basepath%>serviceServlet?action=getTargetNodesByProjectModuleId",
                        data: data,
                        success: function (response, status, xhr) {
                            //console.log("收到回信")
                            //console.log(response)
                            //console.log(JSON.parse(response));
                            let targetNodeObj=trObj.find(".targetNode").html("")
                            if(response == "[]"){
                                targetNodeObj.html("无")
                            }else{
                                $.each(JSON.parse(response),function (index,item){
                                    //console.log(index)
                                    //console.log(element.id)
                                    let optionObj=$("<option/>")
                                    optionObj.val(item.id)
                                    optionObj.html(item.use)
                                    targetNodeObj.append(optionObj)
                                })
                            }
                        },
                        timeout: 10000, //如果超时1000毫秒，就结束
                        error: function (xhr, errorText, errorType) { //错误后的行为
                            console.log("回信异常")
                            console.log("errorText:" + errorText); //error
                            console.log("errorType:" + errorType); //not found
                            console.log("xhr.status:" + xhr.status); //404
                            console.log("xhr.statusText:" + xhr.statusText); //not found
                        },
                        dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                    })//根据模块的第一个,获取target节点的ajax
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            }) // 工程改变,要查模块
        }
        if(eventTarget.hasClass("projectModule")){
            let projectModuleObj=trObj.find(".projectModule")
            let data={"projectModuleId":projectModuleObj.val()}
            $.ajax({//根据模块的第一个,获取target节点
                type: "post",
                url: "<%=basepath%>serviceServlet?action=getTargetNodesByProjectModuleId",
                data: data,
                success: function (response, status, xhr) {
                    //console.log("收到回信")
                    //console.log("+"+response+"+")
                    //console.log(JSON.parse(response));
                    let targetNodeObj=trObj.find(".targetNode").html("")
                    if(response === "[]"){
                        targetNodeObj.append("<option value=无>无</option>")
                    }else{
                        //console.log("+"+response+"+")
                        $.each(JSON.parse(response),function (index,item){
                            //console.log(index)
                            //console.log(element.id)
                            let optionObj=$("<option/>")
                            optionObj.val(item.id)
                            optionObj.html(item.use)
                            targetNodeObj.append(optionObj)
                        })
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//根据模块的第一个,获取target节点的ajax
        }
    })
    $(".taskType").change(function (event){//任务类型select
        let eventTarget=$(event.target)
        let tbody=$(".tbody")
        let taskType=eventTarget.val()
        //显示 被选中的任务类型 form 区间
        $(".form-horizontal").addClass("hidden")//让全部form都隐藏的语句
        $(".form-horizontal").find(".taskType").find("option").removeAttr("selected")
        console.log(eventTarget.val())
        console.log(eventTarget.val()+"Form")
        $("."+taskType+"Form").removeClass("hidden")
        $("." + taskType + "Form").find(".taskType").find("option").each(function (index,item){
            if($(item).val()==taskType){
                $(item).attr("selected","selected")
            }else{
                $(item).removeAttr("selected")
            }
        })
        //显示 被选中的任务类型 form 区间
        //console.log("主任务id:"+$("." + taskType + "Form").find(".submit:first").attr("mainTaskId"))
        let mainTaskId=$("." + taskType + "Form").find(".submit:first").attr("mainTaskId");
        //获取相应任务类型的任务列表的区间
        $.ajax({                                               //获得任务列表
            type: "post",
            url: "<%=basepath%>taskServlet?action=getTasks",
            data: {"taskType":eventTarget.val()},
            success: function (response, status, xhr) {
                console.log("收到回信")
                //console.log(response)
                let jsonObj=JSON.parse(response);
                //console.log(jsonObj);
                let count=0;
                tbody.html("")
                //渲染列表
                $.each(jsonObj,function (index,item){
                    //console.log(index)
                    //console.log(item)
                    let trObj=$("<tr>")
                    trObj.addClass("tr")
                    let tdObjCount=$("<td>")
                    let inputCheckBoxObj=$("<input>")
                    inputCheckBoxObj.attr("type","checkbox")
                    inputCheckBoxObj.addClass("hidden")
                    tdObjCount.append(inputCheckBoxObj)
                    let spanObj=$("<span/>")
                    spanObj.html(++count+" ")
                    tdObjCount.append(spanObj);
                    let deleteDivNode=$("<div/>")
                    deleteDivNode.addClass("glyphicon glyphicon-remove  taskDelete hand")
                    tdObjCount.append(deleteDivNode)
                    trObj.append(tdObjCount)
                    let tdObjTaskName=$("<td>")
                    tdObjTaskName.addClass("showTask hand")
                    tdObjTaskName.text(item.name);
                    tdObjTaskName.attr("taskId",item.id)
                    tdObjTaskName.attr("taskType",taskType)
                    if(mainTaskId==undefined){

                    }else{
                        if (mainTaskId==item.id){
                            tdObjTaskName.addClass("btn-primary")
                        }else {

                        }
                    }//按照对应类型的form中submit的mainTaskId,给这个td一个选中颜色
                    trObj.append(tdObjTaskName)
                    tbody.append(trObj)
                })
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//获取相应任务类型的任务列表
        //获取相应任务类型的任务列表的区间

        <%--if(response.indexOf("{")>=0){//如果你是json格式的,那么我就分析你;反之,你就报错,那我就报错--%>
        <%--    let submitJsonObj=JSON.parse(response)--%>
        <%--    let submitObj=$(".submit")--%>
        <%--    //console.log("存入成功")--%>
        <%--    alert("存入成功")--%>
        <%--    //console.log($(".submit").attr('mainTaskId'));--%>
        <%--    let tbody=$(".tbody:first")--%>
        <%--    submitObj.attr("submitResult","存入成功")--%>
        <%--    if(submitObj.attr('mainTaskId')){//有值,就是true,就是update--%>
        <%--        console.log("update")--%>
        <%--        $.ajax({                                               //获得任务列表--%>
        <%--            type: "post",--%>
        <%--            url: "<%=basepath%>taskServlet?action=getUpdatePhpCodeTasks",--%>
        <%--            data: data,--%>
        <%--            success: function (response, status, xhr) {--%>
        <%--                console.log("收到回信")--%>
        <%--                //console.log(response)--%>
        <%--                var jsonObj=JSON.parse(response);--%>
        <%--                //console.log(jsonObj);--%>
        <%--                let count=0;--%>
        <%--                tbody.html("")--%>
        <%--                //渲染列表--%>
        <%--                $.each(jsonObj,function (index,item){--%>
        <%--                    //console.log(index)--%>
        <%--                    //console.log(item)--%>
        <%--                    let trObj=$("<tr>")--%>
        <%--                    trObj.addClass("tr")--%>
        <%--                    let tdObjCount=$("<td>")--%>
        <%--                    let inputCheckBoxObj=$("<input>")--%>
        <%--                    inputCheckBoxObj.attr("type","checkbox")--%>
        <%--                    inputCheckBoxObj.addClass("hidden")--%>
        <%--                    tdObjCount.append(inputCheckBoxObj)--%>
        <%--                    let spanObj=$("<span/>")--%>
        <%--                    spanObj.html(++count+" ")--%>
        <%--                    tdObjCount.append(spanObj);--%>
        <%--                    let deleteDivNode=$("<div/>")--%>
        <%--                    deleteDivNode.addClass("glyphicon glyphicon-remove  taskDelete hand")--%>
        <%--                    tdObjCount.append(deleteDivNode)--%>
        <%--                    trObj.append(tdObjCount)--%>
        <%--                    let tdObjTaskName=$("<td>")--%>
        <%--                    tdObjTaskName.addClass("showTask hand")--%>
        <%--                    if(index===$(".submit").attr('mainTaskId')){--%>
        <%--                        tdObjTaskName.addClass("btn-primary")--%>
        <%--                    }--%>
        <%--                    tdObjTaskName.text(item);--%>
        <%--                    tdObjTaskName.attr("taskId",index)--%>
        <%--                    tdObjTaskName.attr("taskType",taskType)--%>
        <%--                    trObj.append(tdObjTaskName)--%>
        <%--                    tbody.append(trObj)--%>
        <%--                })--%>

        <%--                let selectedObj=tbody.find(".btn-primary")--%>
        <%--                let getTaskNodesData={}--%>
        <%--                getTaskNodesData.taskType=selectedObj.attr("taskType");--%>
        <%--                getTaskNodesData.taskId=selectedObj.attr("taskId");--%>
        <%--                //console.log(getTaskNodesData)--%>
        <%--                $.ajax({                                  //获得里列表选中的那一项,去拿它的 targetNodes--%>
        <%--                    type: "post",--%>
        <%--                    url: "<%=basepath%>taskServlet?action=getTaskNodes",--%>
        <%--                    data: getTaskNodesData,--%>
        <%--                    success: function (response, status, xhr) {--%>
        <%--                        console.log("收到回信")--%>
        <%--                        //console.log(response)--%>
        <%--                        let jsonObj=JSON.parse(response)--%>
        <%--                        let mainTaskId=""--%>
        <%--                        let resultButtonArea=$(".resultButtonArea:first").html("")--%>
        <%--                        $.each(jsonObj,function (index,item){--%>
        <%--                            // console.log(index)--%>
        <%--                            // console.log(item)--%>
        <%--                            if(index=="mainTaskId"){--%>
        <%--                                mainTaskId=item;--%>
        <%--                            }else {--%>
        <%--                                let divObj=$("<div/>")--%>
        <%--                                divObj.addClass("btn btn-default targetNode")--%>
        <%--                                divObj.attr("targetNodeId",index)--%>
        <%--                                divObj.attr("mainTaskId",mainTaskId)--%>
        <%--                                divObj.text(item)--%>
        <%--                                resultButtonArea.append(divObj)--%>
        <%--                                resultButtonArea.append(" ")--%>
        <%--                            }--%>
        <%--                        })--%>
        <%--                    },--%>
        <%--                    timeout: 10000, //如果超时1000毫秒，就结束--%>
        <%--                    error: function (xhr, errorText, errorType) { //错误后的行为--%>
        <%--                        console.log("回信异常")--%>
        <%--                        console.log("errorText:" + errorText); //error--%>
        <%--                        console.log("errorType:" + errorType); //not found--%>
        <%--                        console.log("xhr.status:" + xhr.status); //404--%>
        <%--                        console.log("xhr.statusText:" + xhr.statusText); //not found--%>
        <%--                    },--%>
        <%--                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text--%>
        <%--                })//ajax                                 //获得里列表选中的那项,去拿它的 targetNodes--%>
        <%--            },--%>
        <%--            timeout: 10000, //如果超时1000毫秒，就结束--%>
        <%--            error: function (xhr, errorText, errorType) { //错误后的行为--%>
        <%--                console.log("回信异常")--%>
        <%--                console.log("errorText:" + errorText); //error--%>
        <%--                console.log("errorType:" + errorType); //not found--%>
        <%--                console.log("xhr.status:" + xhr.status); //404--%>
        <%--                console.log("xhr.statusText:" + xhr.statusText); //not found--%>
        <%--            },--%>
        <%--            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text--%>
        <%--        })//ajax  //update后,获得任务列表--%>
        <%--    }else {//undefined 为false,就是add--%>
        <%--        console.log("add")--%>
        <%--        submitObj.attr('mainTaskId',submitJsonObj.mainTaskId) //这个是补充于add时候,update的时候不更新--%>
        <%--        $.ajax({                                               //获得任务列表--%>
        <%--            type: "post",--%>
        <%--            url: "<%=basepath%>taskServlet?action=getUpdatePhpCodeTasks",--%>
        <%--            data: data,--%>
        <%--            success: function (response, status, xhr) {--%>
        <%--                console.log("收到回信")--%>
        <%--                //console.log(response)--%>
        <%--                var jsonObj=JSON.parse(response);--%>
        <%--                //console.log(jsonObj);--%>
        <%--                let count=0;--%>
        <%--                tbody.html("")--%>
        <%--                // rendDataToTaskList(jsonObj,tbody,data["taskType"],count)  //渲染列表--%>
        <%--                let rendDataToTaskListCount=1;--%>
        <%--                $.each(jsonObj,function (index,item){--%>
        <%--                    //console.log(index)--%>
        <%--                    //console.log(item)--%>
        <%--                    let trObj=$("<tr>")--%>
        <%--                    trObj.addClass("tr")--%>
        <%--                    let tdObjCount=$("<td>")--%>
        <%--                    let inputCheckBoxObj=$("<input>")--%>
        <%--                    inputCheckBoxObj.attr("type","checkbox")--%>
        <%--                    inputCheckBoxObj.addClass("hidden")--%>
        <%--                    tdObjCount.append(inputCheckBoxObj)--%>
        <%--                    let spanObj=$("<span/>")--%>
        <%--                    spanObj.html(++count+" ")--%>
        <%--                    tdObjCount.append(spanObj);--%>
        <%--                    let deleteDivNode=$("<div/>")--%>
        <%--                    deleteDivNode.addClass("glyphicon glyphicon-remove  taskDelete hand")--%>
        <%--                    tdObjCount.append(deleteDivNode)--%>
        <%--                    trObj.append(tdObjCount)--%>
        <%--                    let tdObjTaskName=$("<td>")--%>
        <%--                    tdObjTaskName.addClass("showTask hand")--%>
        <%--                    if(rendDataToTaskListCount++ == Object.keys(jsonObj).length){--%>
        <%--                        tdObjTaskName.addClass("btn-primary")--%>
        <%--                    }--%>
        <%--                    tdObjTaskName.text(item);--%>
        <%--                    tdObjTaskName.attr("taskId",index)--%>
        <%--                    tdObjTaskName.attr("taskType",taskType)--%>
        <%--                    trObj.append(tdObjTaskName)--%>
        <%--                    tbody.append(trObj)--%>
        <%--                })--%>

        <%--                let selectedObj=tbody.find(".btn-primary")--%>
        <%--                let getTaskNodesData={}--%>
        <%--                getTaskNodesData.taskType=selectedObj.attr("taskType");--%>
        <%--                getTaskNodesData.taskId=selectedObj.attr("taskId");--%>
        <%--                //console.log("这是add行为后的渲染列表后的获取targetNodes的data")--%>
        <%--                //console.log(getTaskNodesData)--%>
        <%--                $.ajax({                                  //获得里列表里被选中的那一项,去拿它的 targetNodes--%>
        <%--                    type: "post",--%>
        <%--                    url: "<%=basepath%>taskServlet?action=getTaskNodes",--%>
        <%--                    data: getTaskNodesData,--%>
        <%--                    success: function (response, status, xhr) {--%>
        <%--                        console.log("收到回信")--%>
        <%--                        //console.log(response)--%>
        <%--                        //return--%>
        <%--                        let jsonObj=JSON.parse(response)--%>
        <%--                        let mainTaskId=""--%>
        <%--                        let resultButtonArea=$(".resultButtonArea:first").html("")--%>
        <%--                        $.each(jsonObj,function (index,item){--%>
        <%--                            // console.log(index)--%>
        <%--                            // console.log(item)--%>
        <%--                            if(index=="mainTaskId"){--%>
        <%--                                mainTaskId=item;--%>
        <%--                            }else {--%>
        <%--                                let divObj=$("<div/>")--%>
        <%--                                divObj.addClass("btn btn-default targetNode")--%>
        <%--                                divObj.attr("targetNodeId",index)--%>
        <%--                                divObj.attr("mainTaskId",mainTaskId)--%>
        <%--                                divObj.text(item)--%>
        <%--                                resultButtonArea.append(divObj)--%>
        <%--                                resultButtonArea.append(" ")--%>
        <%--                            }--%>
        <%--                        })--%>
        <%--                    },--%>
        <%--                    timeout: 10000, //如果超时1000毫秒，就结束--%>
        <%--                    error: function (xhr, errorText, errorType) { //错误后的行为--%>
        <%--                        console.log("回信异常")--%>
        <%--                        console.log("errorText:" + errorText); //error--%>
        <%--                        console.log("errorType:" + errorType); //not found--%>
        <%--                        console.log("xhr.status:" + xhr.status); //404--%>
        <%--                        console.log("xhr.statusText:" + xhr.statusText); //not found--%>
        <%--                    },--%>
        <%--                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text--%>
        <%--                })//ajax                                 //获得里列表选中的那项,去拿它的 targetNodes--%>
        <%--            },--%>
        <%--            timeout: 10000, //如果超时1000毫秒，就结束--%>
        <%--            error: function (xhr, errorText, errorType) { //错误后的行为--%>
        <%--                console.log("回信异常")--%>
        <%--                console.log("errorText:" + errorText); //error--%>
        <%--                console.log("errorType:" + errorType); //not found--%>
        <%--                console.log("xhr.status:" + xhr.status); //404--%>
        <%--                console.log("xhr.statusText:" + xhr.statusText); //not found--%>
        <%--            },--%>
        <%--            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text--%>
        <%--        })//ajax  //add后,获得任务列表--%>
        <%--    } //判断是新增还是update,他俩的列表选中规则不同--%>
        <%--}else {--%>
        <%--    submitObj.attr("submitResult","存入失败")--%>
        <%--    alert("存入失败,请看consoleLog");--%>
        <%--}--%>
    })//任务类型select

    $(".targetNodeFilter").keyup(function (event){
        let keyWord=$(event.target).val().trim()
        //$(".targetNodeArea").find(".targetNode").removeClass("checked btn-primary").removeClass(" btn-primary").removeClass("hidden")
        $(".targetNodeArea").find(".targetNode").attr("class","targetNode btn btn-default")
        $(".targetNodeArea").find(".targetNode:not(:contains('"+keyWord+"'))").addClass("hidden")
    })//节点过滤器input

    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        console.log(1)
        let eventTarget = $('.yaotijiaodedian')
        let trObjData = {};
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        if(table.hasClass("docker")){
            <c:if test="${empty server}">
                trObjData["serverId"]=trObj.find(".serverEdit:first").val();
            </c:if>
            <c:if test="${!empty server}">
                trObjData["serverId"]="${server.id}";
            </c:if>
            //获取serverId
            let idObj=trObj.find(".id");
            if(idObj.hasClass("createSign")){//有新增标志
                trObjData["id"]=null;
            }else{//没有新增标识,表示update,需要从单元格中获取container Id
                trObjData["id"]=idObj.text();
            }//获取containerId
            let arr = ["name","imageVersion", "cpuMemory", "volume","ip","portMap","use","endTime"];
            trObj.find(".form-control").each(function (index,element){
                for (let i in arr) { //不写这个就要把上面的这个if写5次
                    if ($(element).hasClass(arr[i] + "Edit")) {
                        trObjData[arr[i]] = $(element).val()
                    }
                }//不写这个就要把上面的这个if写8次
            })//收集参数
            // console.log(trObj)
            // return
            console.log(trObjData)
            //return
            $.ajax({
                type: "post",
                url: "<%=basepath%>containerServlet?action=ajaxConfigContainer&configType=docker",
                data: trObjData,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        alert("存入成功")
                        <c:if test="${empty server}">
                            location.href = "<%=basepath%>containerServlet?action=list";
                        </c:if>
                        <c:if test="${!empty server}">
                            location.href = "<%=basepath%>containerServlet?action=list&serviceId=${service.id}";
                        </c:if>
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget = $('.yaotijiaodedian')
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        //console.log(trObj.find(".id:first").text())
        if(table.hasClass("docker")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>containerServlet?action=ajaxConfigContainer&serviceId=${service.id}&delete=true&configType=docker",
                data: {"id": trObj.find(".id:first").text()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        alert("删除成功")
                        <c:if test="${empty server}">
                        location.href = "<%=basepath%>containerServlet?action=list";
                        </c:if>
                        <c:if test="${!empty server}">
                        location.href = "<%=basepath%>containerServlet?action=list&serviceId=${service.id}";
                        </c:if>
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }

    })//这是删除的模态框点击了确定键后搜索数据并提交的过程
</script>
<!--表格点击事件-->
</html>